<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container">
      <el-select
        v-model="activityYear"
        placeholder="学年"
        clearable
        size="medium"
        style="width: 130px"
        class="filter-item"
        @change="getCredit">
        <el-option
          v-for="item in config.activityYearOptions"
          :key="item.value"
          :label="item.value"
          :value="item.value"/>
      </el-select>
      <el-select
        v-model="activityTerm"
        placeholder="学期"
        clearable
        size="medium"
        style="width: 110px"
        class="filter-item"
        @change="getCredit">
        <el-option
          v-for="item in config.activityModuleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-select
        v-model="activityType"
        placeholder="选择活动版块"
        clearable
        size="medium"
        style="width: 130px"
        class="filter-item"
        @change="getCredit">
        <el-option
          v-for="item in config.activityClassOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <p class="descCount">当前查询结果的学分总计：<span>{{ currentSum }}</span></p>
    </div>
    <el-table :data="studentList" size="medium" border stripe highlight-current-row>
      <el-table-column prop="year" label="学年" width="100px" align="center"/>
      <el-table-column prop="term" label="学期" width="100px" align="center"/>
      <el-table-column label="活动名称" min-width="180px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.ac_name }}</span><el-tag v-if="scope.row.ac_type === 1" type="success" size="mini">快捷活动</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="活动版块" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.ac_classify | formateClassify }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="Ac_teacher" label="指导老师" min-width="60px" align="center"/> -->
      <el-table-column prop="Ac_score" label="基础学分" min-width="60px" align="center"/>
      <el-table-column prop="Ac_addscore" label="附加分" min-width="60px" align="center"/>
      <el-table-column label="备注" min-width="60px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.addscoreexplain || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否认证" min-width="60px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rzbs | foamatVetifyState }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="hj" label="合计" min-width="60px" align="center"/>
    </el-table>
  </div>
</template>

<script>
import config from '@/utils/config.js'
import Pagination from '@/components/Pagination'
import { getStudentCredit } from '@/api/credit'

export default {
  components: { Pagination },
  data() {
    return {
      loading: false,
      config,
      pageTotal: 1000,
      currentSum: 0,
      searchUserId: null,
      activityYear: null,
      activityTerm: null,
      activityType: null,
      studentList: []
    }
  },
  created() {
    const id = this.$route.params.id
    this.searchUserId = id === ':id' ? this.$store.getters.userInfo.user_id : id
    if (this.$store.getters.menuList.xf_score_detail || id === ':id') {
      this.getCredit()
    }
  },
  methods: {
    getCredit() {
      this.loading = true

      const params = {
        year: this.activityYear,
        term: this.activityTerm && this.activityTerm.toString(),
        ac_classify: this.activityType && this.activityType.toString(),
        user_id: this.searchUserId && this.searchUserId.toString()
      }

      Object.keys(params).map(i => {
        if (!params[i]) {
          delete params[i]
        }
      })

      getStudentCredit(params)
        .then(res => {
          this.currentSum = res.data.zf
          this.studentList = res.data.list
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.descCount {
  font-size: 14px;
  color: #5e6d82;
  margin: 0;
  span {
    color: red;
  }
}
@media screen and (max-width: 370px) {
  .pagination-container.hidden-sm-and-up {
    padding: 0;
  }
}
</style>
